<template>
  <div class="orders">
    <mt-header title="订单管理"></mt-header>
    <div class="order" v-for="(item,index) in items" :key="index">
      <mt-cell :title="'订单编号：'+item.order_id" :value="item.order_status" style="height: 50px;line-height: 50px"></mt-cell>
      <div class="pic">
        <img slot="icon" :src="item.order_picture">
      </div>
      <div class="detail">
        <p class="price">￥{{item.order_price}}</p>
        <p class="time">时间：{{item.order_time}}</p>
        <!--<mt-cell :title="'￥'+item.order_price" :label="item.order_time"></mt-cell>-->
      </div>
      <div class="operate">
        <mt-button class="btn" plain type="primary" size="small" @click="checkOrder" v-if="item.check">查看订单</mt-button>
        <mt-button class="btn" plain type="primary" size="small" @click="confirmOrder" v-if="item.confirm">确认订单</mt-button>
        <mt-button class="btn" plain type="danger" size="small" @click="cancelOrder" v-if="item.cancel">取消订单</mt-button>
        <mt-button class="btn" plain type="danger" size="small" @click="deleteOrder" v-if="item.delete">删除订单</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: "orders",
    data(){
      return{
        items:[],
        Items:[
          {
            order_id: 111,
            order_status: 1,
            order_time: "2018-01-01 12:00:00",
            order_price: 12,
            order_picture: '/good.jpg'
          },
          {
            order_id: 112,
            order_status: 0,
            order_time: "2018-01-01 12:00:00",
            order_price: 12,
            order_picture: '/good.jpg'
          },
          {
            order_id: 113,
            order_status: -1,
            order_time: "2018-01-01 12:00:00",
            order_price: 12,
            order_picture: '/good.jpg'
          }
        ]
      }
    },
    methods:{
      checkOrder(){
        this.$router.push({path: '/user/detail'})
      },
      confirmOrder(){
        this.$router.push({path: '/user/detail'})
      },
      cancelOrder(){
        this.$router.push({path: '/user/detail'})
      },
      deleteOrder(){
        this.$router.push({path: '/user/detail'})
      },
      changeItem(items){
        items.forEach((item)=>{
          if(item.order_status==-1){
            item.order_status='交易关闭'
            item.delete=true;
            item.confirm=false;
            item.check=false;
            item.cancel=false;
          } else if(item.order_status==0){
            item.order_status='待接单'
            item.delete=false;
            item.confirm=false;
            item.check=true;
            item.cancel=true;
          } else if(item.order_status==1){
            item.order_status='待回收'
            item.delete=false;
            item.confirm=false;
            item.check=true;
            item.cancel=false;
          } else if (item.order_status==2){
            item.order_status='交易成功'
            item.delete=false;
            item.confirm=true;
            item.check=false;
            item.cancel=false;
          } else {
            item.order_status='错误'
            item.delete=false;
            item.confirm=false;
            item.check=false;
            item.cancel=false;
          }
        })
        this.items=items;
      }
    },
    mounted(){
      let app = this;
      app.changeItem(this.Items)
      // /*
      // ** 用户查看订单接口
      // */
      // axios.get('http://yaobeier.cn:8080/RR_Consumer/user/check_order',{
      //   params:{
      //     user_id: 1
      //   }
      // }).then(function(response){
      //
      //   console.log(response);
      // }).catch(function (error){
      //   console.log(error);
      // });
    }
  }
</script>
<style scoped>
  .orders {
    background-color: #fff;
    width: 100%;
    height: 100%;
  }

  .order {
    position: relative;
    width: 100%;
    height: 170px;
  }

  .pic {
    position: absolute;
    left: 0;
    width: 120px;
    height: 120px;
  }

  .pic img{
    width: 100px;
    height: 100px;
    margin-left: 10px;
  }

  .detail {
    position: absolute;
    left: 130px;
    width: fit-content;
    height: 120px;
  }

  .price{
    color: #26a2ff;
    font-size: 24px;
  }

  .time{
    color: #888;
    font-size: 14px;
  }

  .operate {
    position: absolute;
    right: 10px;
    bottom: 20px;
    width: fit-content;
  }
  .btn{
    margin-left: 10px;
  }
</style>
